<template>
  <div>
    <mt-header fixed title="可用积分">
      <router-link to="/user" slot="left">
        <mt-button icon="back"></mt-button>
      </router-link>
    </mt-header>
    <mt-navbar fixed v-model="selected" style="top:.8rem">
      <mt-tab-item id="1">全部</mt-tab-item>
      <mt-tab-item id="2">收入</mt-tab-item>
      <mt-tab-item id="3">支出</mt-tab-item>
    </mt-navbar>
    <div style="height:1.8rem"></div>
    <!-- tab-container -->
    <div
      v-infinite-scroll="loadMore"
      infinite-scroll-disabled="moreLoading"
      infinite-scroll-distance="0"
      infinite-scroll-immediate-check="false"
      id="1"
    >
      <mt-cell v-for="item in list" :key="item.id" class="border-bottom" :title="item.memo" :label="item.date">
        <span :style="item.status===1?'color: green':'color: red'">{{item.point}}</span>
      </mt-cell>
      <div class="loading-box tc" v-if="isLoading">
        <mt-spinner :size="40" type="fading-circle" class="loading-more"></mt-spinner>
        <span class="loading-more-txt">加载中...</span>
      </div>
      <div class="not-content" v-if="noMore">---暂无更多记录---</div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'MyIntegral',
  data () {
    return {
      selected: '1',
      list: [],
      isLoading: false, // 加载中转菊花
      isMoreLoading: true, // 加载更多中
      noMore: false, // 是否还有更多
      pageInfo: { // 分页信息
        page: 1,
        pageSize: 10,
        total: 0, // 总条数
        totalPage: 1 // 总分页数
      }
    }
  },
  methods: {
    getInfo (type) {
      var typeVal = ''
      if (this.selected === '2') {
        typeVal = 1
      }
      if (this.selected === '3') {
        typeVal = 2
      }
      console.log(typeVal)
      axios.get('/meimai/interface/member/getPointRecord', {
        params: {
          memberId: this.$store.state.userId,
          'pageSize': this.pageInfo.pageSize,
          'page': this.pageInfo.page,
          'type': typeVal
        }
      }).then((res) => {
        let datas = res.data
        console.log(datas)
        if (datas.code === 0) {
          if (type === 'loadMore') {
            this.list = this.list.concat(datas.array)
          } else {
            this.list = datas.array
          }
          this.pageInfo.total = datas.total
          this.pageInfo.totalPage = datas.totalPage
        }
        this.isLoading = false
        this.isMoreLoading = false
      })
    },
    loadMore () {
      this.pageInfo.page += 1 // 增加分页
      this.isMoreLoading = true // 设置加载更多中
      this.isLoading = true // 加载中
      if (this.pageInfo.page > this.pageInfo.totalPage) { // 超过了分页
        this.noMore = true // 显示没有更多了
        this.isLoading = false // 关闭加载中
        return false
      }
      // 做个缓冲
      setTimeout(() => {
        this.getInfo('loadMore')
      }, 500)
    }
  },
  watch: {
    selected () {
      this.isMoreLoading = true
      this.pageInfo.page = 1 // 初始化
      this.pageInfo.totalPage = 1
      this.list = []
      this.noMore = false
      this.getInfo()
    }
  },
  mounted () {
    this.getInfo()
  }
}
</script>
<style lang="stylus">
.mint-cell-wrapper
  padding-top: .3rem
  padding-bottom: .3rem
  background-image: none
.mint-header
  background: #ec2935
.mint-navbar .mint-tab-item
  color: #333
  border-bottom: 1px solid #ccc
.mint-navbar .mint-tab-item.is-selected
  border-bottom: 3px solid #ec2935
  color: #ec2935
</style>
